#@front_layout()
	
#define css()
	
#end


#define page()

<div class="page">
	<!-- 标题栏 -->
	<header class="bar bar-nav">
	    <a class="icon icon-me pull-left open-panel"></a>
	    <a class="icon icon-refresh pull-right" href="javascript:search('');$('#search').val('')"></a>
	    <h1 class="title">首页</h1>
	</header>
	<div class="bar bar-header-secondary">
		<div class="searchbar">
			<a class="searchbar-cancel">取消</a>
			<div class="search-input">
				<label class="icon icon-search" for="search"></label> 
				<input type="search" id="search" placeholder='输入关键字...' />
			</div>
		</div>
	</div>
	<!-- 工具栏 -->
	<nav class="bar bar-tab">
	    <a class="tab-item external active" href="#(ctx)/">
	        <span class="icon icon-home"></span>
	        <span class="tab-label">首页</span>
	    </a>
	    <a class="tab-item external" href="#(ctx)/addView">
	        <span class="icon icon-edit"></span>
	        <span class="tab-label">新增</span>
	    </a>
	    <a class="tab-item external" href="#(ctx)/checkView">
	        <span class="icon icon-emoji"></span>
	        <span class="tab-label">自测</span>
	    </a>
	    <a class="tab-item external" href="#">
	        <span class="icon icon-settings"></span>
	        <span class="tab-label">设置</span>
	    </a>
	</nav>
	<!-- 这里是页面内容区 -->
	<div class="content native-scroll">
		<div class="list-block contacts-block" id="wordList">
			#for(x : wordMap)
				<div class="list-group">
					<ul>
						<li class="list-group-title">#(x.key)</li>
						#for(y : x.value)
							<li>
								<a href="#(ctx)/wordDetail/#(y.id)">
									<div class="item-content">
										<div class="item-inner">
											<div class="item-title">#(y.word)</div>
											<div class="item-after">#(y.commentEllipsis)</div>
										</div>
									</div>
								</a>
							</li>
						#end
					</ul>
				</div>
			#end
		</div>
	</div>
</div>

#end

#define js()
<script>

function search(value) {
	$.get(ctx + "/list", {word: value}, function(data) {
		$("#wordList").empty();
		
		var content = [];
		
		for(var key in data) {
			content.push('<div class="list-group">');
			content.push('	<ul>');
			content.push('		<li class="list-group-title">' + key + '</li>');
			for(var i = 0; i < data[key].length; i++) {
				content.push('		<li>');
				content.push('			<a href="' + ctx + '/wordDetail/' + data[key][i].id + '">');
				content.push('				<div class="item-content word-item">');
				content.push('					<div class="item-inner">');
				content.push('						<div class="item-title">' + data[key][i].word + '</div>');
				content.push('						<div class="item-after">' + data[key][i].commentEllipsis + '</div>');
				content.push('					</div>');
				content.push('				</div>');
				content.push('			</a>');
				content.push('		</li>');
			}
			content.push('	</ul>');
			content.push('</div>');
		}
		$("#wordList").html(content.join(""));
	}, 'json');
}

$(function() {
	var searchTimer = null;
	var oldValue = '';
	$("#search").on("input",function(e) {
	    clearTimeout(searchTimer);
		var value = e.delegateTarget.value;
		searchTimer = setTimeout(function(){
			if(oldValue != value) {
				search(value);
				oldValue = value;
			}
	    }, 500);
    });
	
});
</script>
#end